<template>
    <div>

        <!--        书写文章-->
        <dao-hang></dao-hang>
        <div style="background-color: white;width:100%;display: flex;height:2400px; ">
            <div>
                <el-image style="width: 1500px;height: 700px;margin-left: 180px;"
                          src="https://img2.baidu.com/it/u=1084794618,4144773300&fm=26&fmt=auto&gp=0.jpg"></el-image>


                <div class="toto" style="margin-top: 50px;margin-left: 400px;margin-right: 180px; ">
                    <el-image style="width: 150px;height: 150px;"
                              :src="userInfo.ima"></el-image>
                    <h2>昵称：{{userInfo.name}}</h2>

                    <el-form :model="creatArt" ref="ruleForm" style="margin-top: 50px;">
                        <div>
                            <h2>标题</h2>
                            <el-input v-model="creatArt.cotitle" style="width: 500px;"></el-input>
                        </div>

                        <div style="display: flex;margin-top: 50px;">
                            <div style="flex: 1;">
                                <h2>文章图片</h2>
                                <el-upload
                                        drag
                                        :action="`${this.$axios.defaults.baseURL}/api/file/upload`"
                                        :on-success="onSuccess"
                                        ref="refed"
                                        multiple>
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </div>

                            <div style="flex: 1;">
                                <el-image :src="imgSrc" tyle="background-size: 100%;"></el-image>
                            </div>

                        </div>


                        <div style="margin-top: 50px;">
                            <h2>摘要</h2>
                            <el-form-item prop="desc">
                                <ckeditor v-model="creatArt.tabook"></ckeditor>
                            </el-form-item>
                        </div>

                        <div>
                            <h2>正文</h2>
                            <ckeditor v-model="creatArt.conten"></ckeditor>
                        </div>


                        <br>
                        <el-form-item style="margin-top: 100px;margin-bottom: 100px;">

                            <el-button style="margin-left: 500px;"  type="success"  @click="submitForm('formName')">立即创建</el-button>
<!--                            <el-button @click="resetForm('ruleForm')">重置</el-button>-->
                        </el-form-item>
                    </el-form>
                    <div style="height: 100px;"></div>
                </div>


            </div>
        </div>
    </div>

</template>

<script>


    export default {
        name: "creaArticle",
        data() {
            return {
                url: this.$axios.defaults.baseURL,
                //将数据塞进数组
                creatArt: {},
                userInfo: {
                    name:'',
                },

                imgSrc: require('../ima/4.jpg'),
                fileList: {}

            };
        },
        methods: {
            creamut(){
                this.$axios.get("/api/user/main/info", {headers: {TOKEN: this.token}}).then(res => {
                    this.userInfo = res.data.data;
                    this.Cid = res.data.data.id;
                    this.name = res.data.data.name;
                });
            },
            //自动添加 图片上传
            submitForm() {
                //这里摁死插入不进去
                this.creatArt.name=this.userInfo.name;//让Conten表的这个name等于User表的name
                this.creatArt.Cid=this.userInfo.id;


                this.creatArt.img = this.imgSrc;


                this.fileList.path = this.creatArt.img; //插不进去
                console.log(this.fileList.path) //这个获取不到 undefind
                this.creatArt.name  = this.userInfo.name;
                this.$axios.post("/api/conten/creablog", this.creatArt).then(res => {
                    if (res.data.status === 1) {
                        this.$message.success(res.data.msg);
                        this.$router.push('/index');
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            onSuccess(res) {
                //            http://localhost:8090          /api/file/md5
                this.imgSrc = this.$axios.defaults.baseURL + res.data.url;
                console.log(res);
            },


            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created() {
            this.$axios.get("/api/user/main/info", {headers: {TOKEN: this.token}}).then(res => {
                this.userInfo = res.data.data;
                this.Cid = res.data.data.id;
                this.name = res.data.data.name;
            });
            this.creamut();
        },


    }
</script>

<style scoped>
            .toto{

            }
</style>